<!--
 * @Description: 教师教学质量评估表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 17:16:51
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" v-loading="loading">
      <div class="table_title">教师教学质量评估表</div>
      <el-row class="gaugeOutfit" style="line-height: 28px;">
        <el-col :span="12" style="padding-left:10px"
          >培训班名称：
          <input type="text" v-model="dataForm.className" style="width:70%" />
        </el-col>
        <el-col :span="12" style="padding-left:10px"
          >培训时间：
          <!-- <input type="text" v-model="dataForm.pxsj" /> -->
          <el-date-picker
            v-model="dataForm.pxsj"
            type="daterange"
            range-separator="~"
            value-format="yyyy-MM-dd"
            size="mini"
          >
          </el-date-picker>
        </el-col>
      </el-row>

      <table>
        <tr >
          <td width="8%">
            教师姓名
          </td>
          <td width="26%">
            课 程 名 称
          </td>
          <td width="15%">
            授课思路清晰， 课堂掌控 组织能力好，理论联系实 际(25 分)
          </td>
          <td width="15%">
            讲课富有激情， 营造课堂 气氛， 语言表达有条理性 (25 分)
          </td>
          <td width="15%">
            备课充分， 教学内容设计 系统全面， 课件制作精美 (25 分)
          </td>
          <td width="15%">
            开展教学互动，善于启发引 导，调动学员学习积极性 (25 分)
          </td>
          <td>
            总分
          </td>
        </tr>

        <tr  v-for="(item, index) in list" :key="index">
          <td style="text-align:left; padding: 15px 10px">
            <input type="text" v-model="item.jsxm" style="width:100%" />
          </td>
          <td style="text-align:left">
            <input type="text" v-model="item.kcmc" style="width:100%" />
          </td>
          <td style="text-align:left">
            <input
              type="text"
              v-model="item.sksl"
              style="width:100%;text-align:center"
              oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>25)value=25;if(value<0)value=null"
            />
          </td>
          <td style="text-align:left">
            <input
              type="text"
              v-model="item.jkfy"
              style="width:100%;text-align:center"
              oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>25)value=25;if(value<0)value=null"
            />
          </td>
          <td style="text-align:left">
            <input
              type="text"
              v-model="item.bkcf"
              style="width:100%;text-align:center"
              oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>25)value=25;if(value<0)value=null"
            />
          </td>
          <td style="text-align:left">
            <input
              type="text"
              v-model="item.kzjx"
              style="width:100%;text-align:center"
              oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>25)value=25;if(value<0)value=null"
            />
          </td>
          <td>
            {{ total(item) }}
          </td>
        </tr>
      </table>

      <div class="table_bottom">
        注：此表由学员填写。
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: []
    };
  },
  created() {},
  computed: {
    total() {
      return item => {
        let total = 0;
        for (let key in item) {
          if (key != "jsxm" && key != "kcmc" && key != "zf") {
            total += Number(item[key]);
          }
        }
        total = total == 0 ? "" : total;
        item.zf = total;
        return total;
      };
    }
  },
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA13/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        // console.log(this.dataForm, 258);
        // 创建10位数组
        this.list = Array.apply(null, { length: 10 }).map(() => {
          return {
            jsxm: "",
            kcmc: "",
            sksl: "",
            jkfy: "",
            bkcf: "",
            kzjx: "",
            zf: ""
          };
        });
        // 获取数据数组长度
        let lgh = this.dataForm.childrenVOList.length;
        // 替换数组
        this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
        this.loading = false;
      });
    },
    exportWord() {
      this.dataForm.childrenVOList = this.list;
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          if (key == "childrenVOList") {
            this.dataForm[key].forEach(item => {
              for (let key2 in item) {
                if (item[key2] == null) {
                  item[key2] = "";
                }
              }
            });
          } else {
            this.dataForm[key] = this.dataForm[key].join(",");
          }
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA13Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "教师教学质量评估表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "./TABLESTYLE.scss";
input {
  // border: 1px solid #000 !important;
}
.mytable {
  width: 80%;
}
</style>
